<template>
  <div class="author-header fx-h-c">
    <div class="left fx-h-c">
      <img :src="header.avatar" alt="" />
      <div class="msg">
        <span class="name">{{ header.author }}</span>
        <div class="time-view" v-if="!time">
          <span class="time">{{ header.time }}</span>
          <span class="view" v-if="header.view === 0 || header.view"
            >阅读 {{ header.view }}</span
          >
        </div>
        <div v-else>{{ time }}</div>
      </div>
    </div>
    <div class="right">
      <a-button :type="type" @click="focus(header.id)">{{
        focusWord
      }}</a-button>
    </div>
  </div>
</template>

<script>
import { getUserInfoFromSession } from "@/utils/utils";
import { mapState } from "vuex";
import { normlizeArticle, handleFocus } from "@/utils/utils";
import { get_one } from "@/api/article";
export default {
  name: "author-header",
  data() {
    return {
      foc: false,
      header: {},
    };
  },
  props: ["id", "time"],
  computed: {
    ...mapState(["user"]),
    focusWord() {
      return this.foc ? "已关注" : "关注";
    },
    isFocus() {
      return this.foc ? true : false;
    },
    type() {
      return this.foc ? "primary" : "default";
    },
    hasView() {
      if (header.view == 0) {
        return true;
      }
      return !!header.view;
    },
  },
  async created() {
    // 获取关注的人
    const follows = this.user && this.user.follows;
    // 获取文章信息
    if (this.id) {
      const r = await get_one(this.id);
      // 获取文章头部信息
      const { header } = normlizeArticle(r.data);
      this.header = header;
      // 查找关注的人是否有这个文章作者
      this.foc = !!(
        follows &&
        follows.find((item) => {
          return this.header.id === item.id;
        })
      );
    }
  },
  methods: {
    focus(id) {
      handleFocus(id, this);
    },
  },
};
</script>

<style lang="scss" scoped>
.author-header {
  justify-content: space-between;
  .left {
    img {
      width: 4rem;
      height: 4rem;
      border-radius: 50%;
      margin-right: 1rem;
    }
    .msg {
      font-size: 1.3rem;
      .name {
        font-weight: bold;
        font-size: 2.3rem;
      }
      .time-view {
        margin-top: 1rem;
        color: #909090;
        .time {
          margin-right: 1rem;
        }
      }
    }
  }
}
</style>